<template>
  <div class="vital-signs">
    <header class="header">
      <div class="back-button" @click="goBack">
        <span>&lt;</span>
      </div>
      <h1>生命体征检测</h1>
      <div class="right-icons">
        <span class="icon">♡</span>
        <span class="icon">⋯</span>
      </div>
    </header>

    <div class="service-banner">
      <!-- <img src="https://via.placeholder.com/750x200?text=生命体征检测服务" alt="生命体征检测" class="banner-image" /> -->
      <div class="service-info">
        <h2>专业生命体征检测服务</h2>
        <div class="rating">
          <span class="stars">★★★★★</span>
          <span class="rating-count">4.9 (1600+评价)</span>
        </div>
        <div class="tags">
          <span class="tag">专业护士操作</span>
          <span class="tag">精准检测</span>
          <span class="tag">健康评估</span>
        </div>
      </div>
    </div>

    <div class="service-tabs">
      <div class="tab" :class="{ active: activeTab === 'detail' }" @click="activeTab = 'detail'">服务详情</div>
      <div class="tab" :class="{ active: activeTab === 'review' }" @click="activeTab = 'review'">用户评价</div>
      <div class="tab" :class="{ active: activeTab === 'qa' }" @click="activeTab = 'qa'">常见问题</div>
    </div>

    <div class="tab-content" v-if="activeTab === 'detail'">
      <div class="service-items">
        <div class="service-item" v-for="(item, index) in serviceItems" :key="index" @click="selectServiceItem(item)">
          <div class="item-header">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-price">{{ item.price }}</div>
          </div>
          <div class="item-desc">{{ item.description }}</div>
          <div class="item-features">
            <div class="feature" v-for="(feature, i) in item.features" :key="i">
              <span class="feature-icon">✓</span>
              <span class="feature-text">{{ feature }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="service-process">
        <h3>服务流程</h3>
        <div class="process-steps">
          <div class="step">
            <div class="step-icon">1</div>
            <div class="step-text">预约下单</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">2</div>
            <div class="step-text">护士上门</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">3</div>
            <div class="step-text">专业检测</div>
          </div>
          <div class="step-arrow">→</div>
          <div class="step">
            <div class="step-icon">4</div>
            <div class="step-text">结果解读</div>
          </div>
        </div>
      </div>

      <div class="service-description">
        <h3>服务说明</h3>
        <div class="description-content">
          <p>生命体征检测服务由专业护士提供，使用精准医疗级设备，为您提供全面的健康状况评估，包括以下内容：</p>
          
          <h4>血压测量</h4>
          <p>使用专业电子血压计，准确测量收缩压和舒张压，评估心血管健康状况，及时发现高血压或低血压风险。</p>
          
          <h4>体温测量</h4>
          <p>使用医用温度计，精确测量体温，判断是否存在发热情况，为健康评估提供基础数据。</p>
          
          <h4>脉搏/心率检测</h4>
          <p>通过专业方法测量脉搏频率和节律，评估心脏功能状态，发现心律不齐等异常情况。</p>
          
          <h4>呼吸频率测定</h4>
          <p>观察和计数呼吸频率，评估呼吸系统功能，发现呼吸异常情况。</p>
          
          <h4>血氧饱和度测量</h4>
          <p>使用指夹式脉搏血氧仪，无创测量血氧饱和度，评估肺部供氧能力，尤其适合呼吸系统疾病患者。</p>
          
          <h4>血糖测量</h4>
          <p>使用血糖仪进行指尖采血测量血糖水平，帮助糖尿病患者监测血糖变化，或进行糖尿病风险筛查。</p>
          
          <h4>健康评估报告</h4>
          <p>根据测量结果，护士将提供专业的健康评估报告，解读各项指标的含义，并给出相应的健康建议。</p>
        </div>
      </div>

      <div class="service-notice">
        <h3>服务须知</h3>
        <div class="notice-item">
          <h4>服务时长</h4>
          <p>基础服务约30分钟，包含测量和结果解读</p>
        </div>
        <div class="notice-item">
          <h4>服务范围</h4>
          <p>全国30+城市核心区域，下单前请先确认服务地址是否在范围内</p>
        </div>
        <div class="notice-item">
          <h4>准备事项</h4>
          <p>1. 保持情绪稳定，测量前休息5-10分钟</p>
          <p>2. 准备好既往检查资料（如有）</p>
          <p>3. 血糖测量需空腹或按医嘱时间进行</p>
        </div>
        <div class="notice-item">
          <h4>注意事项</h4>
          <p>1. 测量结果仅供参考，不作为诊断依据</p>
          <p>2. 如发现异常指标，建议及时就医</p>
          <p>3. 护士不提供药物治疗和处方服务</p>
        </div>
      </div>
    </div>

    <div class="tab-content" v-else-if="activeTab === 'review'">
      <div class="reviews">
        <div class="review-summary">
          <div class="rating-large">4.9</div>
          <div class="stars-large">★★★★★</div>
          <div class="review-count">共1600+评价</div>
        </div>
        
        <div class="review-tags">
          <div class="review-tag active">全部</div>
          <div class="review-tag">好评(1550+)</div>
          <div class="review-tag">有图(350+)</div>
          <div class="review-tag">专业(750+)</div>
          <div class="review-tag">细致(600+)</div>
        </div>
        
        <div class="review-list">
          <div class="review-item" v-for="(review, index) in reviews" :key="index">
            <div class="reviewer-info">
              <img :src="review.avatar" alt="用户头像" class="reviewer-avatar" />
              <div class="reviewer-name">{{ review.name }}</div>
              <div class="review-date">{{ review.date }}</div>
            </div>
            <div class="review-stars">★★★★★</div>
            <div class="review-content">{{ review.content }}</div>
            <div class="review-images" v-if="review.images && review.images.length">
              <img v-for="(image, i) in review.images" :key="i" :src="image" alt="评价图片" class="review-image" />
            </div>
            <div class="nurse-reply" v-if="review.reply">
              <div class="reply-title">护士回复：</div>
              <div class="reply-content">{{ review.reply }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-content" v-else-if="activeTab === 'qa'">
      <div class="qa-list">
        <div class="qa-item" v-for="(qa, index) in qaList" :key="index" @click="toggleQA(index)">
          <div class="question">
            <span class="q-icon">Q</span>
            <span class="q-text">{{ qa.question }}</span>
            <span class="q-arrow" :class="{ 'arrow-down': qa.open }">▼</span>
          </div>
          <div class="answer" v-if="qa.open">
            <span class="a-icon">A</span>
            <span class="a-text">{{ qa.answer }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="booking-bar">
      <div class="price-info">
        <div class="price">¥99</div>
        <div class="price-desc">起/次</div>
      </div>
      <button class="book-button" @click="makeAppointment()">立即预约</button>
    </div>
    
    <!-- 底部占位，防止内容被底部固定栏遮挡 -->
    <div class="bottom-placeholder"></div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['go-back', 'show-appointment']);

const activeTab = ref('detail');

const serviceItems = ref([
  {
    title: '基础生命体征监测',
    price: '¥99/次',
    description: '专业护士上门为您测量血压、体温、脉搏、呼吸等基础生命体征，并提供专业解读',
    features: ['30分钟服务', '专业测量设备', '数据记录', '专业解读']
  },
  {
    title: '血糖监测与管理',
    price: '¥129/次',
    description: '专业护士上门为您测量血糖，评估血糖控制情况，提供饮食和用药指导',
    features: ['30分钟服务', '血糖监测', '饮食指导', '用药建议']
  },
  {
    title: '心电监测服务',
    price: '¥199/次',
    description: '使用便携式心电监测设备，为您提供心率、心律等心脏健康指标的监测与评估',
    features: ['45分钟服务', '专业心电设备', '数据分析', '健康建议']
  },
  {
    title: '长期健康监测套餐',
    price: '¥599/月',
    description: '每周上门监测生命体征，建立个人健康档案，追踪健康趋势，及时发现异常',
    features: ['每周一次', '全面数据监测', '健康趋势分析', '异常提醒']
  }
]);

const reviews = ref([
  {
    name: '张**',
    avatar: '',
    date: '2023-04-20',
    content: '父亲有高血压，需要定期监测血压。护士每周上门测量，记录数据，还帮我们分析血压波动的原因，给出了很多实用的建议。服务非常专业，父亲的血压控制得越来越稳定了。',
    images: [],
    reply: '感谢您的信任，我们会继续提供专业的健康监测服务！'
  },
  {
    name: '李**',
    avatar: '',
    date: '2023-04-15',
    content: '糖尿病患者，需要经常监测血糖。护士不仅测量准确，还根据我的血糖波动情况，为我制定了详细的饮食计划和运动建议。现在血糖控制得比以前好多了。',
    images: [],
    reply: ''
  }
]);

const qaList = ref([
  {
    question: '监测设备的准确性如何保证？',
    answer: '我们使用的所有监测设备均为医用级别，定期校准和维护，确保测量结果的准确性。每位护士都经过专业培训，熟练掌握各类设备的使用方法和注意事项，能够按照标准流程进行操作，进一步保证测量结果的可靠性。',
    open: false
  },
  {
    question: '长期健康监测套餐具体包含哪些项目？',
    answer: '长期健康监测套餐包括每周一次的上门服务，每次监测项目包括：血压、脉搏、体温、呼吸、血氧饱和度的测量，以及根据个人需求可选的血糖监测。我们会记录所有数据，建立个人健康档案，分析健康趋势，并在发现异常时及时提醒和建议。',
    open: false
  },
  {
    question: '如何查看我的历史监测数据？',
    answer: '所有监测数据都会记录在我们的系统中，您可以通过手机App随时查看您的历史监测数据和健康趋势图表。同时，每月我们会为您生成一份健康报告，对您的健康状况进行综合评估和分析，并提供个性化的健康建议。',
    open: false
  }
]);

const goBack = () => {
  emit('go-back');
};

const selectServiceItem = (item) => {
  console.log('选择服务项目:', item.title);
  makeAppointment(item.title, parseInt(item.price.replace(/[^\d]/g, '')));
};

const toggleQA = (index) => {
  qaList.value[index].open = !qaList.value[index].open;
};

const makeAppointment = (serviceName, price) => {
  emit('show-appointment', {
    serviceName: serviceName || '生命体征检测服务',
    price: price || 99,
    source: 'vital-signs'
  });
};
</script>

<style scoped>
.vital-signs {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 750px;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding-bottom: 0;
  overflow-x: hidden;
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #00a163;
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.back-button {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header h1 {
  font-size: 18px;
  margin: 0;
  flex: 1;
  text-align: center;
}

.right-icons {
  display: flex;
  gap: 15px;
}

.icon {
  font-size: 20px;
  cursor: pointer;
}

.service-banner {
  background-color: white;
  padding: 15px;
}

.banner-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.service-info h2 {
  font-size: 20px;
  margin: 0 0 10px 0;
}

.rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.stars {
  color: #ff9500;
  margin-right: 5px;
}

.rating-count {
  font-size: 14px;
  color: #666;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 8px;
  background-color: #f0f9f6;
  color: #00a163;
  border-radius: 4px;
  font-size: 12px;
}

.service-tabs {
  display: flex;
  background-color: white;
  margin-top: 10px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 50px;
  z-index: 99;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  color: #666;
  position: relative;
  cursor: pointer;
}

.tab.active {
  color: #00a163;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: #00a163;
  border-radius: 3px;
}

.tab-content {
  background-color: white;
  padding: 15px;
}

.service-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
}

.item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
}

.item-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

.item-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.item-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.feature-icon {
  color: #00a163;
  margin-right: 4px;
}

.service-process {
  margin-top: 20px;
}

.service-process h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.process-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #00a163;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.step-text {
  font-size: 12px;
}

.step-arrow {
  color: #00a163;
}

.service-description {
  margin-top: 20px;
}

.service-description h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.description-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.description-content h4 {
  font-size: 15px;
  margin: 15px 0 5px 0;
}

.description-content p {
  margin: 0 0 10px 0;
}

.service-notice {
  margin-top: 20px;
}

.service-notice h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.notice-item {
  margin-bottom: 15px;
}

.notice-item h4 {
  font-size: 15px;
  margin: 0 0 5px 0;
}

.notice-item p {
  font-size: 14px;
  color: #666;
  margin: 0 0 5px 0;
}

.reviews {
  padding-bottom: 20px;
}

.review-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.rating-large {
  font-size: 36px;
  font-weight: bold;
  color: #ff9500;
}

.stars-large {
  font-size: 24px;
  color: #ff9500;
  margin: 5px 0;
}

.review-count {
  font-size: 14px;
  color: #666;
}

.review-tags {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.review-tag {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 20px;
  font-size: 12px;
  white-space: nowrap;
}

.review-tag.active {
  background-color: #e6f7f1;
  color: #00a163;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-item {
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.reviewer-name {
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.review-date {
  font-size: 12px;
  color: #999;
}

.review-stars {
  font-size: 14px;
  color: #ff9500;
  margin-bottom: 10px;
}

.review-content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.review-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.nurse-reply {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 13px;
}

.reply-title {
  color: #00a163;
  margin-bottom: 5px;
}

.reply-content {
  font-size: 14px;
  color: #666;
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.qa-item {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.question {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.q-icon {
  width: 20px;
  height: 20px;
  background-color: #00a163;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.q-text {
  flex: 1;
  font-size: 15px;
  font-weight: bold;
}

.q-arrow {
  font-size: 12px;
  color: #999;
  transition: transform 0.3s;
}

.arrow-down {
  transform: rotate(180deg);
}

.answer {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  padding-left: 30px;
}

.a-icon {
  width: 20px;
  height: 20px;
  background-color: #ff9500;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.a-text {
  flex: 1;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.booking-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: white;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  max-width: 750px;
  margin: 0 auto;
  z-index: 99;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 24px;
  color: #ff4d4f;
  font-weight: bold;
}

.price-desc {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.book-button {
  padding: 10px 30px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.bottom-placeholder {
  height: 120px;
  width: 100%;
}
</style> 